<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <script src="./element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="./css/normalize.css">

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/global.css">

</head>

<body>

    <div id="app" v-infinite-scroll="load" style="height:100vh; overflow-x: auto;">
        <el-container>
            <el-header direction="vertical">
                <el-container>
                    <div>
                        <el-tabs v-model="menu1" @tab-click="handleClick">
                            <el-tab-pane label="首页" name="first"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                        </el-tabs>
                    </div>
                    <div>
                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div>
                        <el-dropdown split-button type="primary">
                            发布文章
                            <el-dropdown-menu>
                                <el-dropdown-item icon="el-icon-document">草稿箱</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-if="{login:false}">
                        <el-dropdown>
                            <i class=" el-icon-message-solid" style="font-size:30px;"></i>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>评论</el-dropdown-item>
                                <el-dropdown-item>赞和收藏</el-dropdown-item>
                                <el-dropdown-item>新增粉丝</el-dropdown-item>
                                <el-dropdown-item>私信</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-if="{login:false}">
                        <div><el-avatar :size="40" :src="circleUrl"></el-avatar></div>
                    </div>
                </el-container>
                <el-container>
                    <el-tabs type="border-card" style="width:100% ;">
                        <el-tab-pane label="评论">
                            <div v-for="item in 10">
                                <el-row>
                                    <el-col :span="1">
                                        <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                    </el-col>
                                    <el-col :span="23">
                                        <div>
                                            <el-link href="" target="">
                                                用户835755944522
                                            </el-link>
                                            <span>
                                                评论了你的文章
                                            </span>
                                        </div>
                                        <div>
                                            <span>
                                                你写的什么破文章，一点用都没有用。Lorem ipsum dolor sit amet consectetur adipisicing
                                                elit. Cum atque explicabo illo, nulla error vitae quae quasi, aperiam
                                                similique magnam nostrum nam itaque placeat eum fugiat dolor laboriosam
                                                maxime fugit?
                                            </span>
                                        </div>
                                        <div>
                                            <el-divider direction="vertical"></el-divider>
                                            <el-link href="" target="_blanck">
                                                《历经千辛万苦，终于搞懂了mysql的安装》
                                            </el-link>
                                        </div>
                                        <div>
                                            <span>
                                                5天前
                                            </span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-divider direction="horizontal"></el-divider>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="赞和收藏">
                            <div v-for="item in 10">
                                <el-row>
                                    <el-col :span="1">
                                        <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                    </el-col>
                                    <el-col :span="23">
                                        <div>
                                            <el-link href="">用户835755944522</el-link>
                                            <span>赞了你在文章的评论</span>
                                        </div>
                                        <div>
                                            好，我会继续改进的。对于导入mysql的jar包，是8.0以上版本需要加上.cj
                                        </div>
                                        <div>
                                            <el-divider direction="vertical"></el-divider>
                                            <el-link href="">《历经千辛万苦，终于搞懂了mysql的安装》</el-link>
                                        </div>
                                        <div>
                                            5天前
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-divider diection="horizontal"></el-divider>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="新增粉丝">
                            <div v-for="item in 10">
                                <el-row>
                                    <el-col :span="1">
                                        <el-avatar :size="40" :src="circleUrl"></el-avatar>

                                    </el-col>
                                    <el-col :span="22">
                                        <div>

                                            <el-link href="" target="_blank">
                                                用户835755944522
                                            </el-link>
                                            <span>关注了你</span>
                                        </div>
                                        <div>
                                            <span>
                                                刚刚
                                            </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="1">
                                        <el-button>关注</el-button>
                                    </el-col>
                                </el-row>
                                <el-divider direction="horizontal"></el-divider>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="私信">
                            <el-container>
                                <el-aside width="">
                                    <div>
                                        <el-input v-model="a" placeholder="搜索联系人，Enter搜索"></el-input>
                                    </div>
                                    <div>
                                        <el-divider direction="horizontal"></el-divider>
                                    </div>
                                    <div style="height:70vh; overflow-y: auto; overflow-x: hidden;">
                                        <div v-for="item in 90">
                                            <div style="display: flex;">
                                                <div>
                                                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                                </div>
                                                <div>
                                                    <div style="display: flex; justify-content: space-between;">
                                                        <span>
                                                            用户83
                                                        </span>
                                                        <span>07-13
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <span>
                                                            aaaaaaaaaaaaaa
                                                        </span>
                                                        <span>…</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <el-divider direction="horizontal"></el-divider>
                                            </div>
                                        </div>
                                    </div>
                                </el-aside>
                                <el-main direction="vertical" style="height: 80vh; overflow-y: hidden;">
                                    <div style="height: 5%;">
                                        <span>用户835755944522</span>
                                    </div>
                                    <div>
                                        <el-divider direction="horizontal"></el-divider>
                                    </div>
                                    <div style="height: 70%; overflow-y: auto; overflow-x: hidden;">
                                        <div v-for="item in 10" :key="item">
                                            <div>
                                                <div style="text-align: center;"><span>07-13 17:19</span></div>
                                                <div style="display: flex; align-items: center;justify-content: end; ">
                                                    <div style="width: 50%; display: flex;">
                                                        <div style="background-color: aqua; ">
                                                            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                                            Incidunt nemo
                                                            saepe ipsam ad ipsa minus expedita nam ipsum modi reiciendis
                                                            et
                                                            architecto dolorum fugiat perspiciatis molestiae quae
                                                            explicabo,
                                                            commodi
                                                            quis, nisi mollitia quaerat doloremque esse? Aperiam,
                                                            suscipit
                                                            perferendis sit minima similique ut libero, mollitia
                                                            ratione,
                                                            blanditiis
                                                            autem perspiciatis quod iusto!
                                                        </div>
                                                        <div>
                                                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div>
                                                <div style="text-align: center;"><span>07-13 17:19</span></div>
                                                <div
                                                    style="display: flex; align-items: center;justify-content: start; ">
                                                    <div style="width: 50%; display: flex;">
                                                        <div>
                                                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                                        </div>
                                                        <div style="background-color: aqua;">
                                                            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                                            Incidunt nemo
                                                            saepe ipsam ad ipsa minus expedita nam ipsum modi reiciendis
                                                            et
                                                            architecto dolorum fugiat perspiciatis molestiae quae
                                                            explicabo,
                                                            commodi
                                                            quis, nisi mollitia quaerat doloremque esse? Aperiam,
                                                            suscipit
                                                            perferendis sit minima similique ut libero, mollitia
                                                            ratione,
                                                            blanditiis
                                                            autem perspiciatis quod iusto!
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 25%;">
                                        <el-divider direction="horizontal"></el-divider>
                                        <el-input rows="3" v-model="b" placeholder="按Enter发送消息"
                                            type="textarea"></el-input>
                                    </div>
                                </el-main>
                            </el-container>
                        </el-tab-pane>
                    </el-tabs>
                </el-container>
            </el-header>
            <el-main>
                <el-container>

                </el-container>
            </el-main>
        </el-container>
    </div>

</body>

<script src="./js/notice.js"></script>

</html>